<%@ include file="/WEB-INF/jsp/common.jsp"%>
<!--  all common css are included here -->
<link rel="stylesheet" href="css/signin.css" type="text/css" media="all" />
<script type="text/javascript" src="js/app/login.js"></script>

   <style type="text/css">
    /* maing containers */
    
    .register-message{
    text-align: left;
    vertical-align: top;
   
     
    }

/* Element specific */

h3 {
	color: #000; //#48b0e5;
}



a {
	color: #000; //#48b0e5;
}

fieldset {
	border : 0;
	padding : 0;
	margin : 0;
}


/* Navigation */
#navigation li {
	display: inline;
	padding : 5px;
}

/* Main content */
#demo{
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* Documentation*/

.options-header {
	margin-left : 20px;
	padding: 5px;
}

.options-body-middle{
	//margin-left : 70px;
	padding: 5px;
}

.options-body-last{
	float :right;
	padding-right : 25px;
}

.options_body {
	width : 588px;
}


/* Demo Specifics */

#demoWrapper {
	//margin : 1em;
}

#fieldWrapper {
	padding : 1em; 
}

#demoNavigation {
	margin-top : 0.5em;
	margin-right : 1em;
	margin-bottom : 1em;
	text-align: right;
}

input {
	margin-right: 0.1em;
	margin-bottom: 0.5em;
}

.input_field_25em {
	width: 2.5em;
}

.input_field_3em {
	width: 3em;
}

.input_field_35em {
	width: 3.5em;
}

.input_field_12em {
	width: 12em;
}

label {
	margin-bottom: 0.2em;
	font-weight: bold;
	font-size: 0.8em;
}

label.error {
				color: red;
				font-size: 0.8em;
				margin-left : 0.5em;
			}


.step span {
	float: right;
	font-weight: bold;
	padding-right: 0.8em;
}

.navigation_button {
	width : 70px;
}

    

    </style>		

<title>Login</title>
	
</head>

<body class="body-content-class">
<div id="login-wrapper">
	
	<div id="content-wrapper">
		<div id="content">
		<div class="content-top">
		</div>
		<div class="content">


<div class="content-body">
	<table cellspacing="0" cellpadding="0" class="layout-grid">
		<tr>
			<td>
<table class="layout-grid" cellspacing="0" cellpadding="0">
	<tr>
		<td class="normal">
						


<div class="demo-description">



	<div id='login-content'>


		<!--main part-->



		<div id='siginPopup11'>
						<div id="login-header">
							<h2>Login to Myschool</h2>
						</div>
						<div style="position: absolute; right: 27px" id="switcher"></div>
		

				<form:form method="post" id="openid-signin-form" action="openidLogin.htm">
				
				<input type="hidden"  name="openIdProvider" value="na" />


			<div class="contOther">

				<ul class="providers">

					<li id="facebook" onclick="loginUsingOpenId('Yahoo');" class="on"></li>
				</ul>

				<div class="sbar"></div>

				<ul class="providers col2">

					<li id="google" onclick="loginUsingOpenId('Google');" class=""></li>
				</ul>

				<div class="clear"></div>

			</div>
			
			</form:form>

			<div class="clsOr"><b>OR</b></div>

			<div id="signInDiv">

				<form:form method="post" id="signin-form-id" action="login/processLogin.htm">
				
			

					<div id="mandatorySign">
						<span>*</span> indicates required field
					</div>

					<table border="0" cellpadding="0" cellspacing="0">

						<tr>
							<td class="signInTextSmallBold">Username:</td>
							<div id="mandatorySign">
						     <span>*</span> 
					        </div>
							<td class="email1">
							<input id="userId" name="username"
								type="text" class="signInTextSmallInpt mandatory valid"
								tabindex="1"  /></td>
						</tr>

						<tr>
							<td class="signInTextSmallBold">Password:</td>
							<td class="pwd1">
							<input id="pwd" name="password" tabindex="2"
								class="signInTextSmallInpt mandatory valid" title=" password"
								type="password" size="30"  /></td>
						</tr>

					</table>
                    
                   


					<div id="signInDiv2">

					<span id="invalidUserMsg">The email id or password you
							entered is incorrect</span> 
					<span style="display: none;"
							id="umsUnavailableMsg">The login service is temporarily
							unavailable</span>

						<div>
							<div>
								<input id="rememberme" type="checkbox" name="rememberMe"
									tabindex="3" />
							</div>

							<div class="grayTextVerySmall rembTxt">Remember me!</div>
							<input type="button" name="Signin" value="Signin" id="signin-button-id"/>
							<div class="clear"></div>
						</div>

						

							 
							
                            <div id="signin-message-id">
                           
                            </div>
                         
                            <div class="demos-nav register-message" id="register-message-id" style="display: none">
																	<ul>
																		<li><a href="registerSchool.htm" >Register to your school here</a></li>
																		<li><a href="registerSchool.htm" >Register a school here</a></li>
																	</ul>
						     </div>
                            

							<div class="grayTextVerySmall" id="forgtPwd">

								<a id="link_forgotpassword" tabindex="4">Forgot your
									password?</a>
							</div>

						

					</div>

				</form:form>



			</div>

			<div class="createaccMain">

				<div class="createaccText">

					<span>Don't have an account yet?</span>
					<a class="blueTextNormal"
						id="showReg">Create one now.</a>
				</div>
			</div>

		</div>

		<!--main part ends-->

		<!--forgot password starts-->

		<div id="forgotpassForm" style="display: none;">

			

				<div class="borderHeaderIndex">

					<div class="redtext-big">Forgot your password?</div>

				</div>

				<div class="forpassMain">

					<div id="MainDiv" class="forpassSub">

						<div id="SearchAndBuspass">

							<div class="grayTextBold">Enter your email username below.
								We'll send you an email&nbsp; with a link to reset password</div>

							<div class="clear"></div>
						</div>
						<div class="redtext-light">

							Login details <br /> <br />

						</div>

						<div class="forpassLogin">

							<div>

								<div class="forpassEmailTxt signInTextSmallBold">

									<span class="bodytext">E-mail:</span>

								</div>

								<div class="forpassEmail">
                                  <form:form action="login/forgotPassword.htm" id="forgotpassword-form-id" name="forgotpassword-form">
									<input id="forgot-password-email-id" class="mandatory" name="email" type="text" />
									<span class="asterik">*</span> 
									
									<input type="button" id="forgot-password-button-id" name="Forgot Password" value="Forgot Password"/>
									
									<div id="forgotpassword-message-id">
									</div>
									
                                    </form:form>
								</div>

								<div class="clear"></div>

							</div>



							<div class="flashIndex" id="MessageDiv"
								style="display: none; width: 300px; margin-top: 30px; height: 30px;">



							</div>

							<div class="dirBtn">
								<span class="blueTextSmall">&laquo </span> <a
									onclick="backToSignIn();" class="blueTextSmall">back</a>

							</div>

						</div>



					</div>

				</div>

			

		</div>

		<!--forgot password ends-->

		<!--create new account-->

		<div style="display: none;" id="regWithRBmain">

			<div class="borderHeaderIndex">
				<div class="redtext-big">Create myschool account</div>
			</div>


          
			<form:form method="post" id="myschoolNewAccount" name="myschoolNewAccount"  cssClass="bbq"
				action="login/createAccount.htm">

				

					

					
					
					<!-- form fields -->
					
			
				<div id="fieldWrapper">
				<span class="step" id="schoolDetails">
					<span class="font_normal_07em_black">First step - Enter Login Details</span>
					<br />
                    <br/>
						<table border="0" cellpadding="0" cellspacing="0">

							<tr>
								<td class="signInTextSmallBold">Your E-mail: *</td>
								<td class="createAccDiv2">
								
								<input id="address.contact.email" tabindex="1" name="address.contact.email" type="text"
									class="signInTextSmallInpt mandatory valid required"  /></td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">Username: *</td>
								<td class="createAccDiv2">
								
								<input id="username" tabindex="1" name="username" type="text"
									class="signInTextSmallInpt mandatory valid required"  /></td>
							</tr>

							<tr>
								<td class="signInTextSmallBold">Choose Password: *</td>
								<td class="createAccDiv2">
								<input id="password-id"
									tabindex="2" name="password" type="password"
									class="signInTextSmallInpt mandatory valid required"  /></td>
							</tr>

							<tr>
								<td class="signInTextSmallBold">Confirm Password: *</td>
								<td class="createAccDiv2"><input id=confirm-password-id
									tabindex="3" name="passwordConfirm" type="password"
									class="signInTextSmallInpt mandatory valid required"  /></td>
							</tr>

                     </table>


					<br/>
				</span>
				<span id="school-contact-info-id" class="step">
					<span class="font_normal_07em_black">Second step - Personal Information</span>
										<br />
                             <br/>

						<table border="0" cellpadding="0" cellspacing="0">
                   		<tr>
								<td class="signInTextSmallBold">First Name: *</td>
								<td class="createAccDiv2">
								
								<input id="firstname-id" tabindex="1" name="firstName" type="text"
									class="signInTextSmallInpt mandatory valid required"  /></td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">Middle Name:</td>
								<td class="createAccDiv2">
								
								<input id="middlename-id" tabindex="1" name="middleName" type="text"
									class="signInTextSmallInpt mandatory valid"  /></td>
							</tr>
							<tr>
								<td class="signInTextSmallBold">Last Name: *</td>
								<td class="createAccDiv2">
								
								<input id="lastname-id" tabindex="1" name="lastName" type="text"
									class="signInTextSmallInpt mandatory valid required"  /></td>
							</tr>
                   
                       </table>
					
				</span>
				
				<span id="school-info-id" class="step">
					<span class="font_normal_07em_black">Final step - Contact Information</span><br />
							<table border="0" cellpadding="0" cellspacing="0">

                  		<tr>
								<td class="signInTextSmallBold">Address Line1: *</td>
								<td class="createAccDiv2">
								
								<input id="address-line1-id" tabindex="1" name="address.addressLine1" type="text"
									class="signInTextSmallInpt mandatory valid required"  />
									
								</td>
						</tr>

                  		<tr>
								<td class="signInTextSmallBold">Address Line2:</td>
								<td class="createAccDiv2">
								
								<input id="address-line2-id" tabindex="1" name="address.addressLine2" type="text"
									class="signInTextSmallInpt mandatory valid"  />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">City: *</td>
								<td class="createAccDiv2">
								
							    <input id="city-id" tabindex="1" name="address.city" type="text"
									class="signInTextSmallInpt mandatory valid required"  />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">State: *</td>
								<td class="createAccDiv2">
								
	           		<select class="input_field_12em required" id="state" name="address.state" >
					<option value="KA">KA</option>
					</select>
	
										
								</td>
						</tr>

                  		<tr>
								<td class="signInTextSmallBold">Zipcode: *</td>
								<td class="createAccDiv2">
								
							    <input id="zipcode-id" tabindex="1" name="address.zipCode" type="text"
									class="signInTextSmallInpt mandatory valid required"  />
									
								</td>
						</tr>

                  		<tr>
								<td class="signInTextSmallBold">Contatct Cell No: *</td>
								<td class="createAccDiv2">
								
								<input id="cell-no-id" tabindex="1" name="address.contact.cell" type="text"
									class="signInTextSmallInpt mandatory valid required"  />
									
								</td>
						</tr>
                  		<tr>
								<td class="signInTextSmallBold">Contatct Landline No:</td>
								<td class="createAccDiv2">
								
								<input id="home-no-id" tabindex="1" name="address.contact.landline" type="text"
									class="signInTextSmallInpt mandatory valid"  />
									
								</td>
						</tr>

					</table>

				</span>
				
				</div>
				<div id="demoNavigation"> 							
					<input class="navigation_button" id="back" value="Back" type="reset" />
					<input class="navigation_button" id="next" value="Next" type="submit" />
				</div>
			
					
								<div id="createaccount-message-div">
								
								</div>
								<div id="createaccount-next-action-div" style="display: none">
																	<div class="demos-nav register-message">
																	<ul>
																		<li><a href="registerSchool.htm" >Register a school</a></li>
																		<li><a href="preRegister.htm" >Register yourself to a existing school</a></li>
																	</ul>
																	</div>
																	<br/>
								
								</div>
					

				
				</form:form>

				<div id="ActionAlertBox"
					style="margin-top: 25px; width: 100%; height: 170px; vertical-align: middle; border: 0px solid #D2D2D2; display: none;">

					<div>
						<div style="margin-top: 15px" id="AlrtMsg">
							<div style='margin-left: 20px' class="tickImg">
							</div>

							<div style='margin: 10px 30px 5px 20px;'>

								<span>A mail has been sent to - <strong><span
										id="createemailId"> </span></strong></span>

							</div>

							<div style='clear: both'></div>

						</div>

						<div style="height: 35px; margin-top: 10px; margin-left: 20px">

							Please follow the instructions in the mail to activate your
							account.</div>

					</div>





				</div>

				<div class="dirBtn" style="margin: 30px 0 0 20px;">
					<span class="blueTextSmall">&laquo </span> <a
						onclick="backToSignIn();" class="blueTextSmall">back</a>

				</div>

				<div class="clear"></div>


		</div>

		<!--create new account ends-->


</div>






















</div><!-- End demo-description -->

							
					

<div class="UIAPIPlugin" id="widget-docs">
  

  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      



    </ul>
  </div>
  
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
    </ul>
  </div>
  <div id="theming">
  </div>
</div>



		</td>
	</tr>
</table>


			</td>
		</tr>
	</table>
</div>
		</div>
		</div>
	</div>
</div>
</body>
	<!-- Script for social sign in -->

	<script type="text/javascript">

		function backToSignIn()

		{

			$("#forgotpassForm").hide();

			$("#MessageDiv").hide();

			$("#spinnerDiv").hide();

			$("#regWithRBmain").hide();

			$("#siginPopup11").show();

		}

	</script>

	<script type="text/javascript">
		$("#showReg").click(function()

		{

			$("#regWithRBmain").show();

			$("#regWithRB").show();

			$("#siginPopup11").hide();

			$("#ActionAlertBox").hide();

		});

		$('#pwd').keydown(function(event) {

			if (event.keyCode == '13') {

				myschoolLogin();

				return false;

			}

		});

		$('#link_forgotpassword').click(function() {

			$("#forgotpassForm").show();

			$("#siginPopup11").hide();

			$("#EMAIL").val($("#userId").val());

		});

	</script>

	<script type="text/javascript">
		//$(document).ready(showCustLocation);

		function forgotPassword_old()

		{

			var email = $('#EMAIL').val();


		}

		function initValidate() {

			//blockRT();

			$("#mandatorySign").hide();

			$("#mandatorySign2").hide();

			$("#signin").validate(

			{

				rules : {

					pwd : {
						required : true,
						minlength : 3
					},

					userId : {
						required : true,
						email : true
					}

				},

				messages : {

					userId : {
						required : "&nbsp;&nbsp;&nbsp;*"
					},

					pwd : {
						required : "&nbsp;&nbsp;&nbsp;*",
						rangelength : " Enter at least 3 characters"
					}

				}

			});

			$("#createAccount")
					.validate(

							{

								rules : {

									EMAIL : {
										required : true,
										email : true
									},

									PASSWORD : {
										required : true,
										minlength : 5
									},

									CONFIRMPASS : {
										required : true,
										minlength : 5,
										equalTo : "#PASSWORDREG"
									},

									TOS : {
										required : true
									}

								},

								messages : {

									EMAIL : {
										required : "&nbsp;&nbsp;&nbsp;*"
									},

									PASSWORD : {
										required : "&nbsp;&nbsp;&nbsp;*",
										rangelength : jQuery
												.format("Enter at least {0} characters")
									},

									CONFIRMPASS : {
										required : "&nbsp;&nbsp;&nbsp;*",
										minlength : jQuery
												.format(" Enter at least {0} characters"),
										equalTo : "<br/>Enter the same password as above"
									},

									TOS : {
										required : "Please agree to this"
									}

								}

							});

		}

		function createProfile() {

			initValidate();

			var isCreate = $("#createAccount").valid();

			var email = $('#EMAILREG').val();

			var refUrl = '/index1.aspx';

			var data1 = "e=" + email + "&p=" + $('#PASSWORDREG').val();

			if (!isCreate) {

				$("#mandatorySign2").show();

				return false;

			}

			else

			{

				$("#mandatorySign2").hide();

			}

			$("#spinner").show();

			//$('#createAccount').submit();

			$
					.ajax({

						url : "/RegisteruserAjax.aspx?refUrl=" + refUrl,

						type : "POST",

						data : data1,

						cache : false,

						success : function(responseData) {

							responseData = $.parseJSON(responseData);

							if (responseData.status == 200) {

								//alert("confirmation mail sent");

								$("#ActionAlertBox").show();

								$("#createemailId").html(email);

								$("#regWithRB").hide();

								$("#spinner").hide();

								//top.location.href = responseData.refUrl;

							}

							else if (responseData.status == 100) {

								$("#spinner").hide();

								alert('E-mail Id already exists, kindly use another one.');

								// $("#invalidUserMsg").show();

							}

							else if (responseData.status == 101) {

								alert('Please enter valid user details');

								$("#invalidUserMsg").show();

							}

							else if (responseData.status == 102) {

								alert('Please confirm once agiain');

								$("#invalidUserMsg").show();

							}

							else {

								alert('Invalid user details');

								$("#invalidUserMsg").show();

							}

						}

					});

		}


		function readCookie(name) {

			var nameEQ = name + "=";

			var ca = document.cookie.split(';');

			for ( var i = 0; i < ca.length; i++) {

				var c = ca[i];

				while (c.charAt(0) == ' ')
					c = c.substring(1, c.length);

				if (c.indexOf(nameEQ) == 0)
					return c.substring(nameEQ.length, c.length);

			}

			return null;

		}

		function fillRememberMe()

		{

			if (readCookie('ums_user_name') != null)

			{

				var userdet = readCookie('ums_user_name');

				try

				{

					$("#userId").val(userdet);

				} catch (e) {
				}
				;

			}

			if (readCookie('ums_user_random') != null)

			{

				var userdet = readCookie('ums_user_random');

				try

				{

					$("#pwd").val(userdet);

				} catch (e) {
				}
				;

			}

			if (readCookie('ums_user_re') != null)

			{

				var userdet = readCookie('ums_user_re');

				try

				{

					if (userdet == "1")

					{

						$("#rememberme").attr("checked", true);

					}

				} catch (e) {
				}
				;

			}

		}

		fillRememberMe();

		$("#rememberme").attr("checked", true);

	</script>
	    <script type="text/javascript" src="js/formwizard/jquery.form.js"></script>
	    <script type="text/javascript" src="js/formwizard/jquery.validate.js"></script>
	
	    <script type="text/javascript" src="js/formwizard/bbq.js"></script>
	 
	    <script type="text/javascript" src="js/formwizard/jquery.form.wizard.js"></script>
	    
	<script type="text/javascript">
	$(function(){
		$("#myschoolNewAccount").formwizard({ //wizard settings
		 	historyEnabled : true, 
		 	formPluginEnabled: true, 
		 	validationEnabled : true,
		 	focusFirstInput : true,
		 	validationOptions : {
				messages: {	email: "Please enter valid email address"}																
		 	},
			formOptions : {
				success: function(data){
					 if (data) {
							$('#createaccount-message-div').html( data.message);

	                        if(data.result=='success'){

                             $('#createaccount-next-action-div').show();                                
 	                       }
							
						 }
					},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
						$('#createaccount-message-div').html("Error creating account to myschool.Error:"+errorThrown+"<br/>Please refresh the web page ");
				},
				beforeSubmit: function(data){
					
					},
				dataType: 'json',
				resetForm: true
			}
		 });
	});
</script>		

</html>